<template>
	<view>
		<view class="title">
			全部已读
		</view>
		<view class="news_list">
			<view class="list-item" @tap="jumpNewsDetail(item.id)" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view class="top-left">
						<text>{{item.title}}</text>
						<view class="sign">
							
						</view>
					</view>
					<view class="top-right">
						<image class="arrow" src="../../static/icon/icon2.png" mode=""></image>
					</view>
				</view>
				<view class="btm">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: 1,
					title: '系统消息',
					content: 'case后面的返回值代表的是表达式的返回值，当表达式的返回值与任意一个case后面的值相同，就会执行该case后面的代码段，然后将返回值返回出去'
				}, {
					id: 1,
					title: '系统消息',
					content: 'case后面的返回值代表的是表达式的返回值，当表达式的返回值与任意一个case后面的值相同，就会执行该case后面的代码段，然后将返回值返回出去'
				}, {
					id: 1,
					title: '系统消息',
					content: 'case后面的返回值代表的是表达式的返回值，当表达式的返回值与任意一个case后面的值相同，就会执行该case后面的代码段，然后将返回值返回出去'
				}, {
					id: 1,
					title: '系统消息',
					content: 'case后面的返回值代表的是表达式的返回值，当表达式的返回值与任意一个case后面的值相同，就会执行该case后面的代码段，然后将返回值返回出去'
				}, {
					id: 1,
					title: '系统消息',
					content: 'case后面的返回值代表的是表达式的返回值，当表达式的返回值与任意一个case后面的值相同，就会执行该case后面的代码段，然后将返回值返回出去'
				}, ]
			}
		},
		methods: {
			jumpNewsDetail(id) {
				uni.navigateTo({
					url: '../news_detail/news_detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign{
		width: 10rpx;
		height: 10rpx;
		background: #FF4E37;
		border-radius: 50%;
		position: absolute;
		right: -20rpx;
		top: 0rpx;
	}
	.top-right {
		image {
			width: 16rpx;
			height: 26rpx;
		}

	}

	.top-left {
		position: relative;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;

		color: #474747;
		line-height: 40rpx;
	}

	.btm {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B6B6B6;
		line-height: 40rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;
	}

	.list-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 150rpx;
		border-bottom: 2rpx solid #EFEFEF;
	}

	.news_list {
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.title {
		height: 68rpx;
		background: #F9F9F9;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4C5ED3;
		text-align: right;
		line-height: 68rpx;
		padding: 0 30rpx;
	}
</style>
